<template>
  <div class="form-border">
    <div class="title info-deep">邀请链接</div>
    <el-input ref="joinUrl" :value="joinUrl" readonly :disabled="loading" />
    <div class="m-t-10 flex align-items-center">
      <el-radio-group v-model="validPeriod">
        <el-radio :label="24">一天</el-radio>
        <el-radio :label="168">七天</el-radio>
      </el-radio-group>
      <div class="m-l-60 flex align-items-center">
        自定义：
        <el-input v-model="validPeriod" size="small" type="number" style="width: 9rem;">
          <template slot="append">小时</template>
        </el-input>
      </div>
    </div>
    <div class="m-t-10">
      <el-button size="small" type="primary" @click="copyUrl" :disabled="loading || !joinUrl">
        复制链接
      </el-button>
      <el-button size="small" @click="initUrl" @loading="loading">生成邀请链接</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'spaces-invites', // 空间邀请链接
  data() {
    return {
      joinUrl: '', // 不会保存
      validPeriod: 24, // 默认24小时
      loading: false,
    };
  },
  methods: {
    // 生成邀请链接
    initUrl() {
      this.loading = true;
      this.$api.spaces.joinKey({
        spaceId: this.$route.params.spaceId,
        minute: this.validPeriod * 60, // 转换成分钟
      }).then((res) => {
        const host = document.location.host;
        this.joinUrl = `${host}/#/spaces/join?key=${res.data.key}`;
      }).catch(() => {})
        .then(() => { this.loading = false; });
    },
    // 复制链接
    copyUrl() {
      this.$copyText(this.joinUrl)
        .then(() => this.$message.success('已复制到剪切板'))
        .catch(() => this.$message.error('复制失败'));
    },
  },
};
</script>

<style></style>
